<template>
    <div v-if="blogArr!=''">
        <!-- 视频背景搜索条 -->
        <upBtn></upBtn>
        <div>
            <!-- 博客主体-->
            <div class="blog_content">
                <router-link tag="a" target="_blank" :to="{name:'blogDetail',query:{blogId:blog.blogId}}"
                    class="blog_item animated pulse" v-for="(blog,index) in blogArr" :key="index"
                    style="box-shadow: 0 1px 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.05);">
                    <div class="img_content">
                        <img :key='nowTimes' v-lazy="blog.src" :onerror="errorUserPhoto" alt download>
                    </div>
                    <div class="blog_item_body">
                        <span class="downloadImg" @click.stop.prevent="downloadImg(blog.src)">查看图片</span>
                        <p class='blog_text'>{{blog.body | formateVal(blog.body)}}</p>
                    </div>
                    <div class="blog_item_back"></div>
                    <div class="blog_item_title">
                        <p>{{blog.title}} </p>
                    </div>
                    <div class="blog_item_title" style="padding: 0px 20px;top: 66%;color: #72787b;">
                        <span style="font-size: 13px;"><i class='iconfont icon-chakan'
                                style="font-size: 15px;padding-right: 5px;"></i>{{blog.readcount}}</span>
                        <span style="padding-left: 10px;font-size: 13px;"><i class='iconfont icon-pinglun2'
                                style="font-size: 13px;padding-right: 5px;"></i>{{blog.reviewsCount}}</span>
                        <span style="padding-left: 10px;font-size: 13px;"><i class='iconfont icon-icon-test'
                                style="font-size: 13px;padding-right: 5px;"></i>{{blog.fabulousCount}}</span>
                    </div>
                    <div class="readCount">{{friendlyDate(blog.update_time)}} <span
                            style="margin-left: 10px;color: rgb(173, 173, 173);font-family:Cousine;">{{blog.userName}}</span>
                    </div>
                    <div class="tip" v-if="blog.className" @click.stop.prevent='goBlogCard(blog.className)'>
                        {{blog.className}}</div>
                </router-link>
            </div>
            <div style="height: 30px;">
                <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange"
                    :current-page.sync="currentPage" :page-size="row" layout="sizes, total, prev, pager, next"
                    :total="total" :page-sizes="[6, 9, 12, 15]"></el-pagination>
            </div>
        </div>
        <el-dialog width="70%" title="查看图片" :visible.sync="dialogVisible" append-to-body>
            <img :src='downloadSrc' alt="" v-if='downloadSrc' style="width:100%;">
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import axios from "axios";
import Header from "../../components/Header/Header";
import Footer from "../../components/Footer/Footer";
import blog from "../../api/blog";
import saveAs from 'file-saver';

export default {
    data() {
        return {
            blogArr: [],
            isShow: false,
            loading: false,
            total: 10,
            row: 9,
            currentPage: 1,
            downloadSrc: '',
            dialogVisible: false,
            nowTimes: '',
            errorUserPhoto: "javascript:this.src='../../../img/logo.png'"
        };
    },
    created() {
        this.getAllblog();
    },
    methods: {
        handleCurrentChange() {
            console.log(this.currentPage);
            this.getAllblog();
        },

        getAllblog: async function () {
            this.nowTimes = new Date().getTime()
            this.loading = true;
            try {
                let res = await blog.findAllBlogByclassName({ className: this.$route.query.className, page: this.currentPage, row: this.row });
                this.loading = false;
                console.log(res)
                if (res.total == 0) {
                    this.$message.error('暂无内容')
                    setTimeout(() => {
                        this.$router.push('/')
                    }, 2000);
                }
                this.blogArr = ''
                this.blogArr = res.data;
                this.blogArr.forEach(item => {
                    item.src = item.bgImg ? item.bgImg : this.$config.url.randomImgUrl+'?time=' + Math.random();
                    item.color = this.rgb();
                    item.creat_time = new Date(item.creat_time.split("T")[0]).getTime();
                });
                this.total = this.blogArr.length
                console.log(this.blogArr);
            } catch (err) {
                console.log(err);
                // this.$router.push({ path: '/404'})
            }
        },

        rgb() {
            //rgb颜色随机
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            var rgba = "(" + r + "," + g + "," + b + ",0.5)";
            return rgba;
        },

        getMyDate(str) {
            var oDate = new Date(str),
                oYear = oDate.getFullYear(),
                oMonth = oDate.getMonth() + 1,
                oDay = oDate.getDate(),
                oHour = oDate.getHours(),
                oMin = oDate.getMinutes(),
                oSen = oDate.getSeconds(),
                oTime =
                    oYear +
                    "-" +
                    addZero(oMonth) +
                    "-" +
                    addZero(oDay) +
                    " " +
                    addZero(oHour) +
                    ":" +
                    addZero(oMin) +
                    ":" +
                    addZero(oSen);
            return oTime;
        },

        addZero(num) {
            if (parseInt(num) < 10) {
                num = "0" + num;
            }
            return num;
        },

        showUpBtn(boolean) {
            this.isShow = boolean;
        },
        downloadImg(src) {
            //let image = new Image();
            this.dialogVisible = true
            this.downloadSrc = src
        }
    },
    computed: {
        ...mapGetters(["isLogin", "user"])
    },
    filters: {
        formateVal: function (value) {
            if (!value) return "";
            value = value.toString();
            return value.substring(0, 60) + "...";
        },
        formateDate: function (value) {
            if (!value) return "";
            value = value.toString();
            var dateTime = value.split("T")[0];
            return new Date(dateTime).getTime();
        }
    }
};
</script>
<style lang="less" scoped>
@import "./template.less";
@import "../../assets/common.less";
@import "../../assets/css/animate.css";
.downloadImg {
    position: absolute;
    top: 12px;
    right: 14px;
    background: #6463ef;
    height: 2rem;
    padding: 0 10px;
    font-size: 10px;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.upBtn {
    font-size: 40px;
    color: #f78286;
    position: fixed;
    top: 80%;
    left: 93%;
    cursor: pointer;
}
.img_content {
    height: 320px;
    width: 100%;
    justify-content: center;
    display: flex;
    img {
        height: 90%;
        width: auto;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
    }
}

.blog_content {
    width: 80%;
    margin: 0 auto;
    max-width: 880px;
    // min-width: 820px;
    margin-top: 3rem;
}
.blog_item {
    margin: -1rem 0.9rem;
    height: 410px;
    display: inline-block;
    width: 30%;
    background: #1f1f1f;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.05);
    transition: 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
    cursor: pointer;
    .readCount {
        position: absolute;
        top: 90%;
        left: 8%;
        height: 23px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 24px;
        font-size: 14px;
    }
    .tip {
        position: absolute;
        top: 90%;
        left: 70%;
        height: 23px;
        display: flex;
        justify-content: center;
        border: 1px dashed #717171;
        align-items: center;
        color: #bbbbbb;
        min-width: 4rem;
        border-radius: 4px;
        font-size: 14px;
        transition: all 0.3s;
        &:hover {
            transition: all 0.3s;
            background: #6463ef;
            color: white;
            // border:1px solid #d4d4d4;
        }
    }
    &:hover .readCount {
        transition: all 0.3s;
        color: #ff5275;
    }
    &:hover .blog_item_body {
        opacity: 1;
        transition: all 0.4s;
        animation: move 0.4s;
    }
    &:hover .downloadImg {
        animation: movedownload 0.6s;
    }
    &:hover .blog_text {
        animation: movedownload 1s;
    }
    &:hover .blog_item_back {
        transition: all 0.4s;
        background: #1b1b1d;
    }
    &:hover .blog_item_title {
        transition: all 0.3s;
        color: #ff5275;
    }
    &:hover img {
        transform: scale(1.1);
        transition: all 0.4s;
        filter: blur(3px) brightness(0.6);
    }
    &:hover {
        box-shadow: 0 1px 10px 10px #0c0c0c8f !important;
    }
}
.blog_item_back {
    position: absolute;
    height: 330px;
    width: 380px;
    background: rgba(32, 34, 41, 1);
    top: 60%;
    left: -30%;
    -webkit-transform: rotate(7deg);
    transform: rotate(10deg);
}
.blog_item_title {
    width: 100%;
    position: absolute;
    top: 65%;
    text-align: left;
    p {
        font-size: 17px;
        display: flex;
        line-height: 24px;
        padding: 0px 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
}
.blog_item_body {
    position: absolute;
    top: 0;
    color: white;
    width: 100%;
    opacity: 0;
    p {
        height: 15rem;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 25px;
        padding: 0px 20px;
    }
}
@keyframes move {
    0% {
        top: 10%;
    }
    100% {
        top: 0;
    }
}
@keyframes movedownload {
    0% {
        top: 40px;
        opacity: 0;
    }
    100% {
        top: 12px;
        opacity: 1;
    }
}
</style>
